<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">
    
    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">AutoComplete - Pojo</h1>
        <div class="entry">
            <p>AutoComplete also has the select component behavior to display suggestions with labels and submit corresponding values to server.</p>

            <h:form id="form">
                <p:growl id="messages" showDetail="true"/>
                
                <p:panel header="Players">
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputLabel value="Basic Pojo: " for="basicPojo" />
                        <p:autoComplete value="#{autoCompleteBean.selectedPlayer1}" id="basicPojo" completeMethod="#{autoCompleteBean.completePlayer}"
                                    var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player" forceSelection="true" />

                        <h:outputLabel value="Custom Content: " for="customPojo"/>
                        <p:autoComplete value="#{autoCompleteBean.selectedPlayer2}" id="customPojo" completeMethod="#{autoCompleteBean.completePlayer}"
                                        var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player" forceSelection="true">
                            <p:column>
                                <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>
                            </p:column>

                            <p:column>
                                #{p.name} - #{p.number}
                            </p:column>
                            
                            
                        </p:autoComplete>
                    </h:panelGrid>
                </p:panel>

                <br/>

                <p:commandButton value="Submit" id="submit" update="display" oncomplete="dlg.show()"/>

                <p:dialog header="Selected Players" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">
                    <h:panelGrid columns="1" id="display">
                        <h:outputText id="txt1" value="Player 1: #{autoCompleteBean.selectedPlayer1.name}" rendered="#{not empty autoCompleteBean.selectedPlayer1}"/>
                        
                        <h:outputText id="txt2" value="Player 2: #{autoCompleteBean.selectedPlayer2.name}" rendered="#{not empty autoCompleteBean.selectedPlayer2}"/>
                    </h:panelGrid>
                </p:dialog>
            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="autoCompletePojo.xhtml">
                    <pre name="code" class="xml">
&lt;h:form id="form"&gt;
    &lt;p:growl id="messages" showDetail="true"/&gt;

    &lt;p:panel header="Players"&gt;
        &lt;h:panelGrid columns="2" cellpadding="5"&gt;
            &lt;h:outputLabel value="Basic Pojo: " for="basicPojo"/&gt;
            &lt;p:autoComplete value="\#{autoCompleteBean.selectedPlayer1}" id="basicPojo" completeMethod="\#{autoCompleteBean.completePlayer}"
                        var="p" itemLabel="\#{p.name}" itemValue="\#{p}" converter="player" forceSelection="true"/&gt;

            &lt;h:outputLabel value="Custom Content: " for="customPojo" /&gt;
            &lt;p:autoComplete value="\#{autoCompleteBean.selectedPlayer2}" id="customPojo" completeMethod="\#{autoCompleteBean.completePlayer}"
                        var="p" itemLabel="\#{p.name}" itemValue="\#{p}" converter="player" forceSelection="true"&gt;
                &lt;p:column&gt;
                    &lt;p:graphicImage value="/images/barca/\#{p.photo}" width="40" height="50"/&gt;
                &lt;/p:column&gt;

                &lt;p:column&gt;
                    \#{p.name} - \#{p.number}
                &lt;/p:column&gt;
            &lt;/p:autoComplete&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:panel&gt;

    &lt;br/&gt;

    &lt;p:commandButton value="Submit" update="display" oncomplete="dlg.show()"/&gt;

    &lt;p:dialog header="Selected Players" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true"&gt;
        &lt;h:panelGrid columns="1" id="display"&gt;
            &lt;h:outputText id="txt1" value="Player 1: \#{autoCompleteBean.selectedPlayer1.name}" rendered="\#{not empty autoCompleteBean.selectedPlayer1}"/&gt;

            &lt;h:outputText id="txt2" value="Player 2: \#{autoCompleteBean.selectedPlayer2.name}" rendered="\#{not empty autoCompleteBean.selectedPlayer2}"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:dialog&gt;
&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="AutoCompleteBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.event.SelectEvent;
import org.primefaces.examples.domain.Player;

public class AutoCompleteBean {

	private Player selectedPlayer1;
    
    private Player selectedPlayer2;

	public AutoCompleteBean() {
		players = PlayerConverter.playerDB;
	}

    public Player getSelectedPlayer1() {
        return selectedPlayer1;
    }

    public void setSelectedPlayer1(Player selectedPlayer1) {
        this.selectedPlayer1 = selectedPlayer1;
    }

    public Player getSelectedPlayer2() {
        return selectedPlayer2;
    }

    public void setSelectedPlayer2(Player selectedPlayer2) {
        this.selectedPlayer2 = selectedPlayer2;
    }

	public List&lt;Player&gt; completePlayer(String query) {
		List&lt;Player&gt; suggestions = new ArrayList&lt;Player&gt;();
		
		for(Player p : players) {
			if(p.getName().startsWith(query))
				suggestions.add(p);
		}
		
		return suggestions;
	}
}
                    </pre>
                </p:tab>

                <p:tab title="PlayerConverter.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;

import org.primefaces.examples.domain.Player;

public class PlayerConverter implements Converter {

    public static List&lt;Player&gt; playerDB;

    static {
        playerDB = new ArrayList&lt;Player&gt;();

        playerDB.add(new Player("Messi", 10));
        playerDB.add(new Player("Bojan", 9));
        playerDB.add(new Player("Henry", 14));
        playerDB.add(new Player("Iniesta", 8));
        playerDB.add(new Player("Villa", 7));
        playerDB.add(new Player("Xavi", 6));
        playerDB.add(new Player("Puyol", 5));
        playerDB.add(new Player("Afellay", 20));
        playerDB.add(new Player("Abidal", 22));
        playerDB.add(new Player("Alves", 2));
        playerDB.add(new Player("Pique", 3));
        playerDB.add(new Player("Keita", 15));
        playerDB.add(new Player("Busquets", 16));
        playerDB.add(new Player("Adriano", 21));
        playerDB.add(new Player("Valdes", 1));
        playerDB.add(new Player("Thiago", 30));
    }

    public Object getAsObject(FacesContext facesContext, UIComponent component, String submittedValue) {
        if (submittedValue.trim().equals("")) {
            return null;
        } else {
            try {
                int number = Integer.parseInt(submittedValue);

                for (Player p : playerDB) {
                    if (p.getNumber() == number) {
                        return p;
                    }
                }

            } catch(NumberFormatException exception) {
                throw new ConverterException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Conversion Error", "Not a valid player"));
            }
        }

        return null;
    }

    public String getAsString(FacesContext facesContext, UIComponent component, Object value) {
        if (value == null || value.equals("")) {
            return "";
        } else {
            return String.valueOf(((Player) value).getNumber());
        }
    }
}
                    </pre>
                </p:tab>
            </p:tabView>

        </div>
    </ui:define>
</ui:composition>
